<template>

  <a-comment>
    <a-avatar
        style="border-radius: 0"
        slot="avatar"
        src="/user.svg"
    />
    <a slot="author"
       style="color: #6d757a;    font-size: 12px; font-weight: bold;line-height: 18px;padding-bottom: 4px;padding-right: 10px;word-wrap: break-word;">
      {{ content.commentator }}</a>
    <span v-if="content.email" slot="author">邮箱:{{ content.email }}  </span>
    <span v-if="content.websiteUrl" slot="author">主页：{{ content.websiteUrl }}  </span>
    <p slot="content">
      {{ content.commentBody }}
    </p>
    <p>
      <a-tooltip slot="datetime">

        <a-tooltip placement="left" :title="content.createTime">
          <span style="padding-right: 2%;">{{ content.createTime_fast }}</span>
        </a-tooltip>
      </a-tooltip>
      <!--      <span key="comment-basic-like">
              <a-tooltip title="Like">
                <a-icon type="like" :theme="action === 'liked' ? 'filled' : 'outlined'" @click="like"/>
              </a-tooltip>
              <span style="padding-left: '8px';cursor: 'auto'">
                {{ likes }}
              </span>
            </span>
            <span key="comment-basic-dislike">
              <a-tooltip title="Dislike">
                <a-icon
                  type="dislike"
                  :theme="action === 'disliked' ? 'filled' : 'outlined'"
                  @click="dislike"
                />
              </a-tooltip>
              <span style="padding-left: '8px';cursor: 'auto'">
                {{ dislikes }}
              </span>
            </span>-->
      <a key="comment-basic-reply-to" @click="toggleReply()">回复</a>

      <!--      <a-popconfirm title="确定删除吗？" ok-text="确定" cancel-text="取消" @confirm="del({commentId:content.commentId})">
              <a style="padding-left: 1%">删除</a>
            </a-popconfirm>-->

      <reply
          v-if="isShowReply"
          @parentFun="parentFun"
          :pageNo="pageNo"
          :pageSize="pageSize"
          :content="{parentId:this.content.commentId,blogId:content.blogId,commentator:content.commentator}"></reply>
    </p>

    <div>
      <blogChildrenComment v-if="!isShowChildPage"
                           @parentFun="parentFun"
                           @toggleIsShowChildPage="toggleIsShowChildPage"
                           :content="this.content.children"
                           :total="this.content.childrenTotal">
      </blogChildrenComment>
      <childrenCommentPage v-if="isShowChildPage"
                           :content="this.content"
      >
      </childrenCommentPage>
    </div>
  </a-comment>
</template>
<script>
import reply from "@/components/comment/reply";
import blogChildrenComment from "@/components/comment/blogChildrenComment";
import childrenCommentPage from "@/components/comment/childrenCommentPage";
import {blogCommentDelete} from "@/api";
import {getTimer} from '@/utils/util'

export default {
  components: {
    reply,
    blogChildrenComment,
    childrenCommentPage
  },
  data() {
    return {
      likes: 0,
      dislikes: 0,
      action: null,
      isShowReply: false,
      isShowChildPage: false
    }
  },
  props: [
    'content',
    'pageNo',
    'pageSize'
  ],
  mounted() {
    this.content.createTime_fast = getTimer(this.content.createTime)
  },
  methods: {
    like() {
      this.likes = 1
      this.dislikes = 0
      this.action = 'like'
    },
    dislike() {
      this.likes = 0
      this.dislikes = 1
      this.action = 'dislike'
    },
    toggleReply() {
      this.isShowReply = !this.isShowReply
    },
    toggleIsShowChildPage() {
      this.isShowChildPage = !this.isShowChildPage
    },
    parentFun(pageNo, pageSize) {
      this.$emit('parentFun', pageNo, pageSize)
    },
    /*del(comment) {
      blogCommentDelete(comment).then((res) => {
        if (res.code === 200 & res.success === true) {
          this.$message.success('删除成功！')
          this.parentFun()
        }
      })
    }*/
  }
}
</script>
<style scoped>
.ant-comment {
  position: relative;
  font-size: 14px;
}

.ant-comment-avatar img {
  border-radius: 0;
}
</style>
